<!-- todo 对文件列表做处理、移除、preview大图、设置默认图片 -->
<template>
  <div class="upload">
    <div class="previews">
      <div class="preview-item" v-for="item in fileList" :key="item.id">
        <img :src="item.url" :alt="item.title">
      </div>
    </div>
    <a class="a-upload" v-if="showFileSelector">
      <input ref="upload" type="file" @change="fileChange" :accept="accept">
      <div class="upload-btn">
        <icon-font type="icon-jia1" />选择文件
      </div>
    </a>
  </div>
</template>

<script>
  export default {
    name: 'Upload',
    props: {
      fileList: {
        type: Array,
        default: () => []
      },
      maxLength: {
        type: Number,
        default: 1
      },
      accept: {
        type: String,
        default: '*/*'
      },
      multiple: {
        type: Boolean,
        default: false
      },
      action: {
        type: String
      },
      // 上传前钩子函数
      beforeUpload: {
        type: Function
      },
      name: {
        type: String,
        default: 'file'
      }
    },
    computed: {
      showFileSelector () {
        const { fileList, maxLength } = this
        return fileList.length < maxLength
      }
    },
    mounted () {
      // 是否支持多文件上传
      const { multiple, $refs: { upload } } = this
      if (multiple) {
        upload.attributes.setNamedItem(document.createAttribute('multiple'))
      }
    },
    methods: {
      fileChange () {
        const { beforeUpload, doUpload, $refs: { upload } } = this

        if (beforeUpload instanceof Function) {
          const res = beforeUpload(upload.files[0])
          if (res instanceof Promise) {
            res.then(c => {
              c && doUpload()
            })
          } else {
            res && doUpload()
          }
        } else {
          beforeUpload || doUpload()
        }
      },
      doUpload () {
        const { action, name, multiple, $refs: { upload } } = this
        // console.log(upload.files)
        if (action) {
          const formData = new FormData()
          if (multiple) {
            upload.files.forEach(file => {
              formData.append(name, file, file.name)
            })
          } else {
            formData.append(name, upload.files[0])
          }
          const xhr = new XMLHttpRequest()
          xhr.open('post', action)
          xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
              // console.log(xhr)
              this.$emit('change', upload.files)
            }
          }
          xhr.send(formData)
        } else {
          this.$emit('change', upload.files)
          console.log('action empty!!')
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .upload {
    .preview-item {
      width: 78px;
      height: 78px;
      position: relative;
    }
    .a-upload {
      position: relative;
      width: 78px;
      height: 78px;
      display: inline-block;
      input[type=file] {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
        &:focus {
          outline: none;
        }
      }
      .upload-btn {
        display: inline-block;
        color: #aaaaaa;
        border: 1px solid #aaaaaa;
        padding: 0 10px;
        height: 100%;
        width: 100%;
        i {
          display: block;
          font-size: 50px;
        }
      }
    }
    .previews {
    }
  }
</style>
